<template>
  <view
    class="adminContent"
    :style="{
      height: !isToggle ? info.height : height,
    }"
    :class="[getHomeClass]"
  >
    <slot></slot>
    <view v-show="!isToggle" class="scroll">
      <pageNotice :notice="pageData.notice" v-if="pageData.notice"></pageNotice>

      <view class="adminList order">
        <view @click="$utils.toUrl(item.url)" class="item" v-for="(item, i) of orderList" :key="i">
          <!-- @click="goLink(item)" -->
          <view class="box num font-w-600">{{ numFilter(item) }}</view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>

      <view class="adminList menus">
        <view
          class="item"
          v-for="(item, index) of menus"
          :key="index"
          @click="goLink(item)"
        >
          <view class="box">
            <image class="img" :src="item.img" mode="aspectFill"></image>
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view
      class="goHome"
      :class="[getHomeClass]"
      @click="$emit('update:isToggle', false)"
    >
      <view class="icon"><i class="iconfont icon-home-fill"></i></view>
      <view class="text">{{ $t("facePay.toHome") }}</view>
    </view>
  </view>
</template>

<script>
import pageNotice from "./page-notice.vue";
const orderStatus = require("../../static/json/order-status.json");
const menus = [
  {
    img: require("@/service-home/static/images/index-menus-icon/icon-1.png"),
    name: "服务产品",
    url: "/service-home/product/index",
  },
  {
    img: require("@/service-home/static/images/index-menus-icon/icon-2.png"),
    name: "服务订单",
    url: "/service-home/service-order/index",
  },
  {
    img: require("@/service-home/static/images/index-menus-icon/icon-3.png"),
    name: "我的评价",
    url: "/service-home/evaluate/index",
  },
  {
    img: require("@/service-home/static/images/index-menus-icon/icon-4.png"),
    name: "佣金统计",
    url: "/service-home/commission/index",
  },
  {
    img: require("@/service-home/static/images/index-menus-icon/icon-5.png"),
    name: "账户提现",
    url: "/service-home/commission/cash",
  },
  {
    img: require("@/service-home/static/images/index-menus-icon/icon-date.png"),
    name: "服务时间",
    url: "/service-home/user/edit-service-date",
  },
  {
    img: require("@/service-home/static/images/index-menus-icon/icon-address.png"),
    name: "我的位置",
    url: "/service-home/user/address",
  },
  {
    img: require("@/service-home/static/images/index-menus-icon/icon-6.png"),
    name: "抢单",
    url: "/service-home/rob-order/index",
  },
];

const orderList = [
  {
    url: "/service-home/service-order/index?ext=5",
    num: 0,
    name: "待付款",
    status: "5",
  },
  
  {
    url: "/service-home/service-order/index?ext=15",
    num: 0,
    name: "待接单",
    status: "15",
  },
  {
    url: "/service-home/service-order/index?ext=20",
    num: 0,
    name: "待出发",
    status: "20",
    id: 2,
  },
  {
    url: "/service-home/service-order/index?ext=40",
    num: 0,
    name: "待服务",
    id: 3,
    status: "40",
  },
  {
    url: "/service-home/service-order/index?ext=50",
    num: 0,
    name: "进行中",
    id: 4,
    status: "50",
  },
  {
    url: "/service-home/service-order/index?ext=100",
    num: 0,
    name: "已完成",
    id: 5,
    status: "100",
  },
  
];
export default {
  components: {
    pageNotice,
  },

  data() {
    return {
      height: 0,
      menus,
      orderList,
    };
  },

  props: {
    pageData: {
      type: Object,
      default() {
        return null;
      },
    },
    info: {
      type: Object,
      default() {
        return {
          top: 0,
          height: "auto",
        };
      },
    },

    isToggle: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    logOut() {
      uni.removeStorage({
        key: "storeAdminToken",
      });
      uni.redirectTo({
        url: "/admin/login/login",
      });
      // uni.navigateTo({
      // 	url: "/admin/login/login"
      // })
    },
    goLink({ url, action }) {
      switch (action) {
        case "more":
          this.$utils.toast("敬请期待！");
          break;

        case "scan":
          this.scanQrcode();
          break;

        default:
          this.$utils.toUrl(url, "navigate");
          break;
      }
    },

    clerkAliCoupon(res) {
      if (res.result) {
        let ovcoupon = res.result;
        let ovpre = ovcoupon.substr(0, 2);
        if (ovpre !== "ov") {
          return 1;
        }
        uni.navigateTo({
          url: "/admin/coupon/clerk/voucher?ov=" + ovcoupon,
        });
        return 0;
      } else {
        uni.showModal({
          content: "扫码失败。",
        });
      }
      return 0;
    },
    scanQrcode() {
      uni.scanCode({
        success: (res) => {
          let cACoupon = this.clerkAliCoupon(res);
          if (!cACoupon) {
            return;
          }
          uni.navigateTo({
            // #ifdef  APP-PLUS
            url: `/${res.result}`,
            // #endif
            // #ifndef  APP-PLUS
            url: `/${res.path}`,
            // #endif
          });
        },
      });
    },
  },

  computed: {
    numFilter() {
      return function (item) {
        if (!item || !this.pageData) return 0;

        let order_count = this.pageData.order_count;
        if (!order_count.length) return 0;
        let itemArr = order_count.filter((it) => it.status_ext == item.status);
        if (!itemArr.length) return 0;
        let num = 0;
        itemArr.forEach((item) => {
          num += Number(item.cc);
        });
        return num;
      };
    },

    getHomeClass() {
      return this.isToggle ? "on" : "";
    },

    getClass() {
      return (id) => {
        return id === 5 ? "on" : "";
      };
    },
  },

  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select(".goHome")
      .boundingClientRect((data) => {
        this.height = data.height + "px";
      })
      .exec();
  },
};
</script>

<style lang="less" scoped>
.adminContent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 24rpx);
  border-radius: 32rpx 32rpx 0 0;
  background: #f8f8f8;
  transition: 0.4s all;

  &.on {
    padding-top: 0;
    padding-bottom: 0;
  }

  .scroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.adminList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;

  .item {
    width: 25%;
    text-align: center;
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    overflow: hidden;
  }

  .num {
    font-size: 40rpx;
    color: #262626;
  }

  .img {
    width: 50rpx;
    height: 50rpx;
  }
}

.order {
  margin-bottom: 50rpx;
  .name {
    color: #8c8c8c;
  }
}

.menus {
  .item {
    width: 20%;
    margin-bottom: 32rpx;
  }
  .img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }
  .name {
    margin-top: 4rpx;
    color: #262626;
    font-size: 24rpx;
  }
}

.login {
  padding: 40rpx 0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  position: absolute;
  bottom: 0;
  left: calc(50% - 44rpx);
  margin: 0;
  font-size: 22rpx;
  view {
    text-decoration: underline;
  }
}

.realTimeData {
  margin-top: 50rpx;
  border-radius: 30rpx;
  background: #fff;
}

.realTimeDataTit {
  padding: 24rpx 24rpx 0;
  font-size: 36rpx;
  color: #262626;
  font-weight: bold;
}

.realTimeDataBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 44rpx;

  .item {
    width: 25%;
    padding: 28rpx 5rpx 0;
    overflow: hidden;
    text-align: center;
  }

  .num {
    height: 60rpx;
    line-height: 60rpx;
    overflow: hidden;
    font-size: 30rpx;
    color: #262626;
  }

  .name {
    font-size: 20rpx;
    color: #8c8c8c;
  }
}

.more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;

  .moreIcon {
    margin: 0 4rpx;
    width: 8rpx;
    height: 8rpx;
    background: #dddfe0;
    border-radius: 50%;

    &.on {
      background: #caccce;
    }
  }
}

.goHome {
  position: fixed;
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0 calc(env(safe-area-inset-bottom) + 20rpx);

  &.on {
    position: static;
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    background: #fdf1f0;
  }

  .iconfont {
    color: #f0250e;
  }

  .text {
    font-size: 32rpx;
  }
}
</style>
